﻿@charset 'utf-8';
@import 'model-beta';
@import 'theme';
scrollWrap{
	display: block;
	overflow: hidden;
}
scroll{
	transition:all .35s ease;
	-moz-transition:all .35s ease;
	-webkit-transition:all .35s ease;
	-o-transition:all .35s ease;

	transform:translateZ(0px);
	-moz-transform:translateZ(0px);
	-webkit-transform:translateZ(0px);
	-o-transform:translateZ(0px); 

	padding:0;
	border:0;
	margin:0;
	display:block;
	float: left;
}
scrollBar{
	transition:all .35s ease;
	-moz-transition:all .35s ease;
	-webkit-transition:all .35s ease;
	-o-transition:all .35s ease;

	transform:translateZ(0px);
	-moz-transform:translateZ(0px);
	-webkit-transform:translateZ(0px);
	-o-transform:translateZ(0px); 

	padding:0;
	border:0;
	margin:0;
	display:block;

	width: 12px;
	background-color: #BBB;
	opacity: .8;
	float: right;
	position: relative;
	z-index: 5;
	right:12px;
}
scrollBar:hover{
	opacity: 1;
}
scrollBar .animate{
	transition:all .35s ease;
	-moz-transition:all .35s ease;
	-webkit-transition:all .35s ease;
	-o-transition:all .35s ease;

	transform:translateZ(0px);
	-moz-transform:translateZ(0px);
	-webkit-transform:translateZ(0px);
	-o-transform:translateZ(0px); 
}
scrollUp{
	background-color: #888;
	height: 12px;
	display: block;
	position: relative;
	z-index: 4;
}
scrollBlock{
	background-color: #AAA;
	display: block;
	position: relative;
	z-index: 3;
}
scrollDown{
	background-color: #888;
	height: 12px;
	display: block;
	position: relative;
	z-index: 4;
}

/* ----------------------------- */
myInputNumber{
	// width: 120px;
	height: 36px;
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: middle;
	position: relative;
	font-size: 12px;
	font-weight: normal;
	* {
		display: block;
		float: left;
		height: 32px;
		line-height: 24px;
	    user-select: none;
		-webkit-font-smoothing: antialiased;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	}
	.input-value-map{
		display: none;
	}
	&.use-value-map {
		*{
			transition-duration: 450ms;
		}
		.input-value-map{
			top: 0;
			display: block;
		    position: absolute;
			width: 100%;
		    text-align: center;
		    line-height: 28px;
	        pointer-events: none;
			border-radius: 5px;
			z-index: 10;
			.content{
				width:100%;
				height: 100%;
				position: relative;
				background-color: transparent;
				z-index: 2;
				line-height: 32px;
				border-radius: 5px;
			}
			.tip{
				position: absolute;
				top: 0px;
				left: 50%;
				margin-left: -18px;
				opacity: 0;
				z-index: 1;
				span{
					font-family: Simsun;
					// font-size: 16px;
					font-size: 36px;
					width:36px;
					text-align: center;
					line-height: 100%;
					color: white;
					text-shadow: 0px 1px 10px $themeColor;
				}
			}
		}
		input{
			color: transparent;
			// pointer-events: none;
		}
		input:focus, &:hover{
			color: inherit;
			input{
				color: inherit;
			}
			~ .input-value-map, > .input-value-map{
				// display: none;
				transform: translateY(36px);
				box-shadow: 0 1px 10px $themeColor;
				.content{
					background-color: #FFF;
				}
				.tip{
					top: -20px;
					opacity: 1;
				}
			}
		}
	}
}
myInputNumber numberCut,myInputNumber numberAdd{
	width: 30px;
	font-size: 24px;
	text-align: center;
	background-color: #aaabb1;
	cursor: pointer;
	color: #aaabb3;
}
myInputNumber numberCut small,myInputNumber numberAdd small{
	width: 100%;
	line-height: 26px!important;;
}
myInputNumber numberCut:hover,myInputNumber numberAdd:hover{
	background-color: #aaabb2;
}
myInputNumber input{
	width: 38px;
	height: 28px;
	border: 1px solid #aaabb1;
	text-align: center;
	/*padding: 10px 0;*/
	/*line-height: 38px;*/
}

/* TIP */
tipWrap{
	position: relative;
	*{
		transition-duration: 450ms;
	}
	tipContentWrap:hover ~ tipInner{
		opacity: 1;
	}
	tipInner{
		left: 0;
		display: block;
		position: absolute;
		white-space:nowrap; //强制不换号
		text-align: center;
		line-height: 28px;
		pointer-events: none;
		box-shadow: 0 1px 10px $themeColor;
		border-radius: 5px;
		z-index: 10;
		opacity: 0;
		.content{
			width:100%;
			height: 100%;
			position: relative;
			background-color: #FFF;
			z-index: 2;
			line-height: 32px;
			border-radius: 5px;
		}
		.tip{
			position: absolute;
			top: -20px;
			left: 50%;
			margin-left: -18px;
			z-index: 1;
			font-size:12px;
			margin-left: -0.5em;
			span{
				font-family: Simsun;
				font-size: 3em;// 3 * 16
				width:36px;
				text-align: center;
				line-height: 100%;
				color: white;
				text-shadow: 0px 1px 10px $themeColor;
			}
		}
	}
}

/* 图片上传插件 */
imguploaderwrap{
	width: 120px;
	height: 120px;
	overflow: hidden;
	.upload-img-preview{
		width: 100%;
		height: 100%;
		border-radius: 2%;
	}
	imgmark{
		display: block;
		height: 2em;
		@include BgTransparent($themeColor,0.5,50);
		position: relative;
		z-index: 1;
		.button-item{
			// width: 50%;
			height: 2em;
			text-align: center;
			font-size: 1.1em;
			cursor: pointer;
			color: $white;
		}
		&.show{
			margin-top: -2em;
		}
	}
	.upload-loding{
	    width: 90%;    
	    height: 0;
	    border: 3px dotted mix($themeColor,#FFF);
	    border-radius: 20%;
	    text-align: center;
	    padding-top: 45%;  
	    padding-bottom: 45%;
	    font-size: 18px;
	    line-height: 0px;
	}
	.click-to-add{
		width: 90%;
		height: 90%;
		border: 3px dotted mix($themeColor,#000);
		border-radius: 20%;
		input{
			height: 100%;
			width: 100%;
			display: block;
			position: relative;
			z-index: 2;
			margin-bottom: -75%;
			@include BgTransparentAll(0,0);
		}
		.icon{
			// height: 75%;
			width: 100%;
			font-size: 42px;
			font-weight: bold;
			text-align: center;
			vertical-align: middle;
			display: block;
		}
		.value{
			text-align: center;
			display: block;
		}
	}
}


/* xx颜色选择器x */
jqcolorpicker{
	display: block;
    width:36px;
    height:36px;
    background:url('/js/lib/colorpicker/images/select.png');
}


.L-input{
    display: block;
    position: relative;
    margin-top: 24px;
    margin-bottom: 65px;
    width: 100%;
    *{
        margin:0;
    }
    input{
        position: relative;
        display: block;
        width: 100%;
        background-color: transparent;
        border: 0;
        outline: none;
        border-bottom: 1px solid #D3D3D3;
        padding: 0;
        height: 24px;
        font-size: 13px;
        box-sizing: border-box;
        padding-bottom: 2px;
        z-index: 1;
    }

    inputPlaceholder{
        @include unselect;
        color: $silver;
        position: absolute;
        top: -4px;
        -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        -moz-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        -o-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    }
    inputHighlight{
        content: '';
        position: absolute;
        background-color: transparent;
        opacity: .25;
        height: 19px;
        top: -3px;
        width: 160px;
    }
    inputBar{
        position: relative;
        display: block;
        width: 100%;
        z-index: 1;
    }
    inputBar::after,inputBar::before {
        box-sizing: border-box;
        content: '';
        height: 2px;
        top: -2px;
        width: 0;
        position: absolute;
        -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        -moz-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        -o-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    }
    inputBar::before {
        left: 50%;
    }
    inputBar::after{
        right: 50%;
    }
    inputDescription{
        display: none;
        color: $themeColor;
        position: absolute;
        top: 36px;
    }
    input:focus{
        outline: none;
        box-shadow: none;

        + inputPlaceholder{
            color: $black;
            font-size: 13px !important;
            font-weight: 300;
            top: -32px;
            -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
            -moz-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
            -o-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
            transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;

            + inputHighlight{
                width: 0;
                background-color: $themeColor;
                -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
                -moz-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
                -o-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
                transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;

                + inputBar::after, + inputBar::before{
                    background-color: $themeColor;
                    width: 50%;
                }
                + inputBar + inputDescription{
                    display: block;
                    
                }
            }
        }
    }
    
    input:not(:focus):valid + inputPlaceholder {
        color: #808080;
        font-size: 13px !important;
        font-weight: 300;
        top: -32px;
        transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    }
}

/* express */
.express{
	position: fixed;
	width: 0;
	z-index: 10;
	height: 0%;
	background-color: rgba($white,0);
	left: 0;
	color: $white;
	top: 100%;
	@include comic_1(0.5,0);
	overflow: hidden;
	&.focus{
		left: 0;
		background-color: rgba($black,0.95);
		top: 0;
		width: 100%;
		height: 100%;
	}
	table{
		width: 70%;
		max-width: 750px;
		margin-top: 10% !important;
		td{
			padding: 5px;
			font-size: 16px;
			&.time{
				width: 35%;
			}
			&.text{
				text-align: left;
			}
		} 
		th{
			font-size: 15px;
		}
	}
	.final{
		font-size: 15px;
	}
}




@mixin comic_1($time,$speed){
	-webkit-transition: #{$time}s ease-in-out;
    -moz-transition: #{$time}s ease-in-out;
    -ms-transition: #{$time}s ease-in-out;
    -o-transition: #{$time}s ease-in-out;
    transition: #{$time}s ease-in-out;

	transform:translateZ(#{$speed}px);
	-moz-transform:translateZ(#{$speed}px);
	-webkit-transform:translateZ(#{$speed}px);
	-o-transform:translateZ(#{$speed}px);
}
.kill-all-style{
	background:none!important;
	border:0!important;
	border-bottom:1px solid #EEE!important;
	margin:0!important;
	padding:0!important;
	color:initial!important;
	box-shadow: none!important;
}
.kill-all-style:hover{
	background: none!important;
}
.selectsearch-button{
	margin: 4px 0!important;
}
.focus-selectsearch{
	selectPlan{
		display: block;
	}
	.right-arrow{
		transform: rotate(270deg) scale(1) translateY(0.4em);
	}
}
.android-selectsearch{
	position: relative;
	z-index: 3;
}
selectsearchWrap{
	display: inline-block;
	vertical-align: top;
	*{
		box-sizing: border-box;
	}
	selectResult{
		display: block;
		height: 32px;
		// min-width: 120px;
		line-height: 32px;
		font-size: 14px;
		i{
			color:#999;
		}
		.right-arrow{
			transform: rotate(90deg) scale(1) translateY(-0.5em);
			display: inline-block;
			width: 1em;
			font-size: 1em;
			height: 1em;
			line-height: 1em;
			color: #666;
		}
	}
	selectResult:after{

	}
	selectPlan{
		display: none;
		selectInput,optionContainer{
			display: block;
			min-width: 120px;
		}
		selectInput{
			input{
				display: inline-block;
				outline: none;
				width: 0;
				min-width: 94%;

				font-size: 12px;
				margin: 0;
				padding: 8px 8px 6px 8px;
				position: relative;
				outline: none;
				border: none;
				background: bottom left linear-gradient(mix($themeColor, #FFF), mix($themeColor, #FFF)) no-repeat, bottom center linear-gradient(mix($themeColor, #FFF), mix($themeColor, #FFF)) repeat-x, bottom right linear-gradient(mix($themeColor, #FFF), mix($themeColor, #FFF)) no-repeat;
				background-size: 1px 6px, 1px 1px, 1px 6px;
			}
			input:hover, input:focus {
				background: bottom left linear-gradient($themeColor, $themeColor) no-repeat, bottom center linear-gradient($themeColor, $themeColor) repeat-x, bottom right linear-gradient($themeColor, $themeColor) no-repeat;
				background-size: 1px 6px, 1px 1px, 1px 6px;
			}
		}
		optionContainer{
			max-height: 300px;
			overflow-y: auto;
			>*{
				display: none;
			}
			>optionItem{
				display: block;
				width: 100%;
				min-height: 28px;
				line-height: 28px;
				border-bottom: 1px solid #aaa;
			}
			>optionItem:hover{
				background-color: mix($themeColor, #FFF);
			}
		}
	}
}
.notify-container {
    position: fixed;
    right: 0;
    top: 35px;
    z-index: 1060;
    @include shadow(0,0,8px,#aaa);
    .notify {
        background-color: #ffffff;
        display: block;
        position: relative;
        min-width: 220px;
        font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
        color: #1d1d1d;
        padding: 10px;
        margin: 2px 2px 2px 0;
        .caption {
            font-size: 18px;
            line-height: 20px;
            margin-bottom: 5px;
        }
        .content {
            font-size: 14px;
            line-height: 16px;
        }
    }
}
.notify-wrapper {
    position: relative;
    background-color: #1d1d1d;
    width: auto;
    height: auto;
    min-width: 250px;
    color: #ffffff;
}

/* tinycolorpicker */
tinycolorpicker.colorpicker
{
    width:          30px;
    height:         30px;
    position: relative;
    clear: both;
    margin: 0 auto 20px;
    display: inline-block;
}

tinycolorpicker.colorpicker .track {
    background:     #EFEFEF url(/proxy?url=http%3A%2F%2Fo2oimg.qiniudn.com%2Fcolor-picker.png) no-repeat 50% 50%;
    height:         150px;
    width:          150px;
    padding:        10px;
    position:       absolute;
    cursor:         crosshair;
    float:          left;
    left:           -70px;
    top:            -70px;
    display:        none;
    border:         1px solid #ccc;
    z-index:        10;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;

}

tinycolorpicker.colorpicker .color {
    width:          25px;
    height:         25px;
    padding:        1px;
    border:         1px solid #ccc;
    display:        block;
    position:       relative;
    z-index:        11;
    background-color: #EFEFEF;
    -webkit-border-radius: 27px;
    -moz-border-radius: 27px;
    border-radius: 27px;
    cursor: pointer;
}

tinycolorpicker.colorpicker .colorInner {
    width:          25px;
    height:         25px;
    -webkit-border-radius: 27px;
    -moz-border-radius: 27px;
    border-radius: 27px;
}

tinycolorpicker.colorpicker .dropdown {
    list-style: none;
    display: none;
    width: 27px;
    position: absolute;
    top: 28px;
    border: 1px solid #ccc;
    left: 0;
    z-index: 1000;
}

tinycolorpicker.colorpicker .dropdown li{
    height: 25px;
    cursor: pointer;
}

pagecut{
    margin-top: 30px;
    width: 220px;
    height: 24px;
    display: block;
    div {
        display: inline-block;
        text-decoration: none;
        a {
            color: $black;
            span {
                font-size: 13px;
                margin-left: 10px;
                cursor: pointer;
                &:hover {
                    color: $cyan;
                }
            }
        }
        .icon-arrow-left, .icon-arrow-right {
            font-size: 13px;
            color: $cyan;
            margin-left: 10px;
            cursor: pointer;
        }
    }
}

mImgUploaderWrap{
	display: inline-block;
    position: relative;
    input.multiple-upload{
	    display: block;
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    pointer-events: inherit;
	    z-index: 10000;
	    opacity: 0;
    }
}